<template>
  <default-layout>
    <header-back text="户籍关系转入" slot="header"></header-back>
    <div slot="main">
      <transition name="fade" mode="out-in">
        <div v-if="status === 'form'" key="form">
          <div class="type">
            <div class="left">转入类型</div>
            <div class="top-switch">
              <span :class="{current: current === 1}" @click="current = 1">毕业生入户</span>
              <span :class="{current: current === 2}" @click="current = 2">人才引进</span>
              <span :class="{current: current === 3}" @click="current = 3">市内迁移</span>
            </div>
          </div>
          <div class="form-list">
            <div class="form-list-item">
              <span class="label">姓名：</span>
              <span class="content">{{userInfo.aac003}}</span>
            </div>
            <div class="form-list-item">
              <span class="label">档案号：</span>
              <span class="content">{{userInfo.archiveCode}}</span>
            </div>
            <div class="form-list-item">
              <span class="label">身份证号：</span>
              <span class="content">{{userInfo.idCard}}</span>
            </div>
          </div>
          <transition name="fade" mode="out-in">
            <div class="form" :key="1" v-if="current === 1">
              <yd-cell-group>
                <yd-cell-item>
                  <span slot="left" class="label required">身份证材料：</span>
                  <div class="img-box" slot="right">
                    <div class="img-box-item">
                      <upload-image
                              type="23"
                              file-name="身份证正面"
                              v-model="form.file1"
                              required="请上传身份证正面材料"
                              ref="file1"></upload-image>
                      <span class="tip">正面</span>
                    </div>
                    <div class="img-box-item">
                      <upload-image
                              required="请上传身份证反面材料"
                              ref="file2"
                              type="23"
                              file-name="身份证反面"
                              v-model="form.file2"></upload-image>
                      <span class="tip">反面</span>
                    </div>
                  </div>
                </yd-cell-item>
                <yd-cell-item>
                  <span slot="left" class="label required">户口迁移证材料：</span>
                  <div class="img-box" slot="right">
                    <div class="img-box-item">
                      <upload-image
                              type="23"
                              file-name="户口迁移证图片"
                              ref="file3"
                              required="请上传户口迁移证图片"
                              v-model="form.file3"></upload-image>
                      <span class="tip">户口迁移证图片</span>
                    </div>
                  </div>
                </yd-cell-item>
                <yd-cell-item>
                  <span slot="left" class="label required">报到证材料：</span>
                  <div class="img-box" slot="right">
                    <div class="img-box-item">
                      <upload-image
                              type="23"
                              file-name="报到证图片"
                              ref="file4"
                              required="请上传报到证图片"
                              v-model="form.file4"></upload-image>
                      <span class="tip">报到证图片</span>
                    </div>
                  </div>
                </yd-cell-item>
                <yd-cell-item>
                  <span slot="left" class="label required">毕业证材料：</span>
                  <div class="img-box" slot="right">
                    <div class="img-box-item">
                      <upload-image
                              type="23"
                              v-model="form.file5"
                              required="请上传毕业证图片"
                              ref="file5"
                              file-name="毕业证图片"></upload-image>
                      <span class="tip">毕业证图片</span>
                    </div>
                  </div>
                </yd-cell-item>
              </yd-cell-group>
            </div>
            <div class="form" :key="2" v-if="current === 2">
              <yd-cell-group>
                <yd-cell-item>
                  <span slot="left" class="label required">身份证材料：</span>
                  <div class="img-box" slot="right">
                    <div class="img-box-item">
                      <upload-image
                              type="23"
                              v-model="form.file1"
                              required="请上传身份证正面材料"
                              ref="file1"
                              file-name="身份证正面"></upload-image>
                      <span class="tip">正面</span>
                    </div>
                    <div class="img-box-item">
                      <upload-image
                              type="23"
                              v-model="form.file2"
                              required="请上传身份证反面材料"
                              ref="file2"
                              file-name="身份证反面"></upload-image>
                      <span class="tip">反面</span>
                    </div>
                  </div>
                </yd-cell-item>
                <yd-cell-item>
                  <span slot="left" class="label required">户口材料：</span>
                  <div class="img-box" slot="right">
                    <div class="img-box-item">
                      <upload-image
                              type="23"
                              v-model="form.file6"
                              required="请上传户口主页图片"
                              ref="file6"
                              file-name="户口主页图片"></upload-image>
                      <span class="tip">户口主页图片</span>
                    </div>
                    <div class="img-box-item">
                      <upload-image
                              type="23"
                              v-model="form.file7"
                              required="请上传户口本人页图片"
                              ref="file7"
                              file-name="本人页图片"></upload-image>
                      <span class="tip">本人页图片</span>
                    </div>
                  </div>
                </yd-cell-item>
                <yd-cell-item>
                  <span slot="left" class="label required">毕业证材料：</span>
                  <div class="img-box" slot="right">
                    <div class="img-box-item">
                      <upload-image
                              type="23"
                              v-model="form.file5"
                              required="请上传毕业证图片"
                              ref="file5"
                              file-name="毕业证图片"></upload-image>
                      <span class="tip">毕业证图片</span>
                    </div>
                  </div>
                </yd-cell-item>
              </yd-cell-group>
            </div>
            <div class="form" :key="3" v-if="current === 3">
              <yd-cell-group>
                <yd-cell-item>
                  <span slot="left" class="label required">身份证材料：</span>
                  <div class="img-box" slot="right">
                    <div class="img-box-item">
                      <upload-image
                              type="23"
                              v-model="form.file1"
                              required="请上传身份证正面材料"
                              ref="file1"
                              file-name="身份证正面"></upload-image>
                      <span class="tip">正面</span>
                    </div>
                    <div class="img-box-item">
                      <upload-image
                              type="23"
                              v-model="form.file2"
                              required="请上传身份证反面材料"
                              ref="file2"
                              file-name="身份证反面"></upload-image>
                      <span class="tip">反面</span>
                    </div>
                  </div>
                </yd-cell-item>
                <yd-cell-item>
                  <span slot="left" class="label required">户口材料：</span>
                  <div class="img-box" slot="right">
                    <div class="img-box-item">
                      <upload-image
                              type="23"
                              v-model="form.file6"
                              required="请上传户口主页图片"
                              ref="file6"
                              file-name="户口主页图片"></upload-image>
                      <span class="tip">户口主页图片</span>
                    </div>
                    <div class="img-box-item">
                      <upload-image
                              type="23"
                              v-model="form.file7"
                              required="请上传户口本人页图片"
                              ref="file7"
                              file-name="本人页图片"></upload-image>
                      <span class="tip">本人页图片</span>
                    </div>
                  </div>
                </yd-cell-item>
              </yd-cell-group>
            </div>
          </transition>
          <div class="submit">
            <mt-button size="large" type="primary" @click="onSubmit">申请转入</mt-button>
          </div>
        </div>
        <residence-in-success v-if="status === 'success'" key="success"></residence-in-success>
      </transition>
    </div>
    <transition name="router" mode="out-in">
      <router-view></router-view>
    </transition>
  </default-layout>
</template>
<script>
  import HeaderBack from '../../../components/header-back/header-back.vue'
  import UploadImage from '../../../components/upload-image/upload-image.vue'
  import ResidenceInSuccess from './success.vue'
  import DefaultLayout from '../../../layouts/default-layout/default-layout'
  import {validate} from '../../../common/js/util'
  import {mapGetters} from 'vuex'
  export default {
    components: {
      DefaultLayout,
      ResidenceInSuccess,
      UploadImage,
      HeaderBack
    },
    computed: {
      ...mapGetters([
        'userInfo'
      ])
    },
    data() {
      return {
        current: 1,
        status: 'form',
        form: {
          file1: '', // 身份证正面
          file2: '', // 身份证反面
          file3: '', // 户口迁移证
          file4: '', // 报到证
          file5: '', // 毕业证
          file6: '', // 户口页
          file7: '', // 户口本人页
          file8: '' // 毕业证材料
        }
      }
    },
    methods: {
      onSubmit: function () {
        validate.call(this, this.form).then(() => {
          const form = {
            remark: this.current === 1 ? '毕业生入户' : this.current === 2 ? '人才引进' : '市内迁移'
          }
          if (this.current === 1) {
            const list = [this.form.file1, this.form.file2, this.form.file3, this.form.file4, this.form.file5]
            list.forEach((item, index) => {
              for (let i in item) {
                if (item.hasOwnProperty(i)) {
                  form[`attachmentList[${index}].${i}`] = item[i]
                }
              }
            })
          } else if (this.current === 2) {
            const list = [this.form.file1, this.form.file2, this.form.file5, this.form.file6, this.form.file7]
            list.forEach((item, index) => {
              for (let i in item) {
                if (item.hasOwnProperty(i)) {
                  form[`attachmentList[${index}].${i}`] = item[i]
                }
              }
            })
          } else {
            const list = [this.form.file1, this.form.file2, this.form.file6, this.form.file7]
            list.forEach((item, index) => {
              for (let i in item) {
                if (item.hasOwnProperty(i)) {
                  form[`attachmentList[${index}].${i}`] = item[i]
                }
              }
            })
          }
          this.$post('/admin/person/sapi/residence/move/in/save/sign', form, loading => {
            this.$message.loading(loading)
          }).then(res => {
            if (res.result === 1) {
              // this.$message.toast(res.message)
              this.$router.push({name: 'titleSuccess'})
            } else {
              this.$message.alert(res.message)
            }
          })
        })
      }
    }
  }
</script>
<style scoped lang="scss">
  @import "../../../common/style/variable";

  .type {
    display: flex;
    align-items: center;
    padding: .2rem;
    background: #fff;
    .top-switch {
      display: flex;
      border: 1px solid $primary;
      border-radius: 6px;
      margin: 0 0 0 .4rem;
      span {
        display: inline-block;
        padding: .15rem;
        color: $primary;
        min-width: 1.7rem;
        &.current {
          color: #fff;
          background: $primary;
        }
      }
    }
  }

  .form-list, .form {
    margin: .15rem 0 0 0;
  }

  .img-box {
    width: 100%;
    display: flex;
    .img-box-item {
      width: 2.5rem;
      padding: .2rem;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      .tip {
        margin: .2rem 0 0 0;
      }
    }
  }
</style>
